<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pie Chart</title>
</head>
<body>
    <svg width="400" height="400" viewBox="-200 -200 400 400">
        <g transform="translate(100,100)">
            <circle class="pieOuterCircle" r="186" cy="0" cx="0"></circle>
            <path class="pieCircle" fill="#ECECFF" d="M1.1327982892113017e-14,-185A185,185,0,0,1,108.74027167410753,-149.66814395936527L0,0Z"></path>
            <path class="pieCircle" fill="#ffffde" d="M108.74027167410753,-149.66814395936527A185,185,0,0,1,175.9454555146034,57.16814395936527L0,0Z"></path>
            <path class="pieCircle" fill="hsl(80, 100%, 56.2745098039%)" d="M175.9454555146034,57.16814395936527A185,185,0,0,1,57.16814395936528,175.9454555146034L0,0Z"></path>
            <path class="pieCircle" fill="hsl(240, 100%, 86.2745098039%)" d="M57.16814395936528,175.9454555146034A185,185,0,0,1,-175.9454555146034,57.16814395936529L0,0Z"></path>
            <path class="pieCircle" fill="hsl(60, 100%, 63.5294117647%)" d="M-175.9454555146034,57.16814395936529A185,185,0,0,1,-3.398394867633905e-14,-185L0,0Z"></path>
            <text style="text-anchor: middle;" class="slice" transform="translate(42.87610796952396,-131.95909163595255)">10%</text>
            <text style="text-anchor: middle;" class="slice" transform="translate(131.95909163595255,-42.87610796952395)">20%</text>
            <text style="text-anchor: middle;" class="slice" transform="translate(98.11106588963348,98.11106588963347)">15%</text>
            <text style="text-anchor: middle;" class="slice" transform="translate(-62.991181838862104,123.62715523113604)">25%</text>
            <text style="text-anchor: middle;" class="slice" transform="translate(-112.25110796952397,-81.55520375558064)">30%</text>
            <text class="pieTitleText" y="-200" x="0">各步骤所占比例</text>
            <g transform="translate(216,-55)" class="legend">
                <rect style="fill: rgb(236, 236, 255); stroke: rgb(236, 236, 255);" height="18" width="18"></rect>
                <text y="14" x="22">打开 PowerShell 作为管理员</text>
            </g>
            <g transform="translate(216,-33)" class="legend">
                <rect style="fill: rgb(255, 255, 222); stroke: rgb(255, 255, 222);" height="18" width="18"></rect>
                <text y="14" x="22">启用“虚拟机平台”可选组件</text>
            </g>
            <g transform="translate(216,-11)" class="legend">
                <rect style="fill: rgb(181, 255, 32); stroke: rgb(181, 255, 32);" height="18" width="18"></rect>
                <text y="14" x="22">启用“适用于 Linux 的 Windows 子系统”可选组件</text>
            </g>
            <g transform="translate(216,11)" class="legend">
                <rect style="fill: rgb(185, 185, 255); stroke: rgb(185, 185, 255);" height="18" width="18"></rect>
                <text y="14" x="22">更新到 WSL 2</text>
            </g>
            <g transform="translate(216,33)" class="legend">
                <rect style="fill: rgb(255, 255, 69); stroke: rgb(255, 255, 69);" height="18" width="18"></rect>
                <text y="14" x="22">将 WSL 2 设置为默认版本</text>
            </g>
        </g>
    </svg>
</body>
</html>